<template>
  <div class="newsinfo-container">
    <!-- 大标题 -->
    <h3 class="title"> {{ newsinfo.title }}</h3>
    <!-- 子标题 -->
    <p class="subtitle">
      <span>发表时间：{{ newsinfo.add_time | dateFormat }}</span>
      <span>点击：{{ newsinfo.click }}次</span>
    </p>
    <hr>
    <!-- 内容区域 -->
    <div class="content" v-html="newsinfo.content"></div>

    <!-- 评论区域 -->
    <comment-box :cmtid="this.id"></comment-box>
  </div>
</template>

<script>
// 1、导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
  data(){
    return {
      id: this.$route.params.id, //将URL地址传递过来的Id挂载到data方便后续调用
      newsinfo: {}  //新闻对象
    }
  },
  created(){
    this.getNewsInfo()
  },
  methods:{
    getNewsInfo(){
      // 获取新闻
      /*  this.$http.get('api/getnew/'+this.id).then(result=>{
        if(result.body.status === 0){
          this.newsinfo = result.body.message[0]
        }else{
          Toast('请求新闻失败！')
        }
      })
      .catch(function(err){
        Toast('请求服务器失败！' + err.message);
      }) */
      // 模拟数据
        this.newsinfo = {
        "id": this.id,
        "title" : "廉洁奉公存放弄打响阶级企业润例，",
        "add_time": "2018-04-04T10:20:20.000Z",
        "zhaiyao":"摘要内容：奉公存放弄打响阶级企哦的哦",
        "click":3,
        "img_url": "http://www.qqzhi.com/uploadpic/2014-10-01/203445107.jpg",
        "content": "<font color='green'>这是内容部分</font>哈哈东阿弄旅欧的的，的哦弄而来弄二战”期间，为了加强对战机的防护，英美军方调查了作战后幸存飞机上弹痕的分布，决定哪里弹痕多就加强哪里。然而统计学家沃德力排众议，指出更应该注意弹痕少的部位，因为这些部位受到重创的战机，很难有机会返航，而这部分数据被忽略了。事实证明，沃德是正确的。"
      }


    }
  },
  components:{
    // 用来注册子组件的节点
    "comment-box" : comment
  }
}
</script>

<style lang="scss" scoped>
// 如果新闻内容中包含图片，则需要取消scoped
.newsinfo-container{
  padding: 0 4px;
  .title{
    font-size: 14px;
    text-align: center;
    margin: 15px 0;
    color: red;
  }
  .subtitle{
    font-size: 13px;
    color: #226aff;
    display: flex;
    justify-content: space-between;
  }
  .content{}
}
</style>

